<template>
	<view class="container">
		<u-swiper
			:list="detail?.picListV2?.split('|') || []"
			@change="change"
			:current="current"
      :interval="5000"
			:height="680"
		></u-swiper>
		<view class="content">
			<view class="image-thunmbs">
				<image class="active" v-for="(img, index) in (detail?.picListV2?.split('|') || [])" :key="index" :src="img" @click="handleImgClick(index)"></image>
			</view>
			<view class="header">
				<text :class="detail.vipOrNot? 'vip' : ''">{{detail?.nickname}}</text>
				<image v-if="detail.vipOrNot" class="community-tag" src="https://static.wddzq.com/static/V3/aiwanxiaofendui.png" />
      </view>
			<view class="info-data">
				<view class="info-data-item" @click="handleAttendClick">
					<text class="info-data-number">{{detail?.attentionCount}}</text>
					<text class="info-data-text">关注</text>
				</view>
				<view class="info-data-item" @click="handleFansClick">
					<text class="info-data-number">{{detail?.followCount}}</text>
					<text class="info-data-text">粉丝</text>
				</view>
				<view class="info-data-item">
					<text class="info-data-number">{{detail?.goodCount}}</text>
					<text class="info-data-text">点赞</text>
				</view>
			</view>
			<view class="info">
				<view v-if="detail.gender === 1" style="display: flex;align-items: center;justify-content: center;padding: 0 12rpx;height:36rpx;border-radius: 18rpx;background: #E7F1FF;border-radius: 18rpx;margin-right: 26rpx;">
					<image style="background-color: #E5F1FF;" src="https://static.wddzq.com/static/nan.png"></image>
					<text v-if="detail.age" style="color: #2A79D1;font-size: 24rpx;">{{detail.age}}岁</text>
				</view>
				<view v-if="detail.gender === 2" style="display: flex;align-items: center;justify-content: center;padding: 0 12rpx;height: 36rpx;border-radius: 18rpx;background: #E7F1FF;border-radius: 18rpx;margin-right: 26rpx;">
					<image style="background-color: #FFB3AE;" src="https://static.wddzq.com/static/nv.png"></image>
					<text v-if="detail.age" style="color: #FF6565;font-size: 24rpx;">{{detail.age}}岁</text>
				</view>
				
        <image v-if="detail.authenticationType === 1" src="https://static.wddzq.com/static/gerenrenzheng.png"></image>
        <image v-if="detail.authenticationType === 2" src="https://static.wddzq.com/static/juleburenzheng-big.png"></image>
				<image v-else src="https://static.wddzq.com/static/huiyuan-moren.png"></image>
        <text>{{ detail?.authenticationType === 1 ? detail.authenticationJobName : (detail?.authenticationType === 2 ? detail.authenticationClubName : '未认证') }}</text>
			</view>
			<view class="desc">
				“{{ detail.signature || '这个人很懒，暂时还没有留下任何介绍' }}
			</view>

      <view class="active-list-wrapper" v-if="userActivityIngList.length > 0">
        <image style="width: 702rpx; height: 276rpx; position:absolute;" src="/static/personal/active-background.png"/>
        <view style="margin-bottom: 10rpx;position: relative;z-index: 99;padding-left: 24rpx; padding-top: 24rpx;">
          <image style="width: 160rpx;height: 40rpx;" mode="widthFix" src="/static/personal/activing-icon.png" />
        </view>
        <u-scroll-list :indicator="false">
          <view class="list-wrapper">
            <view v-for="(item, index) in userActivityIngList" class="item-wrapper" @click.stop="()=>navigateToPack(item.merchantProductVO.id)">
              <image :src="item.merchantProductVO.productPic"/>
              <view class="item-content-wrapper">
                <text class="item-title">{{item.merchantProductVO.productName}}</text>
                <text class="item-desc">点击查看详情</text>
                <view class="item-time-wrapper">
                  <image style="width: 28rpx; height: 28rpx;" src="/static/personal/time-circle-outlined.png"/>
                  <text>{{item.startDate}}</text>
                </view>
              </view>
            </view>

<!--            <view class="item-wrapper">-->
<!--              <image/>-->
<!--              <view class="item-content-wrapper">-->
<!--                <text class="item-title">【洋酒套餐】果味气泡酒</text>-->
<!--                <text class="item-desc">点击内容区域可以查看...</text>-->
<!--                <view class="item-time-wrapper">-->
<!--                  <image style="width: 28rpx; height: 28rpx;" src="/static/personal/time-circle-outlined.png"/>-->
<!--                  <text>2023/10/10</text>-->
<!--                </view>-->
<!--              </view>-->
<!--            </view>-->

<!--            <view class="item-wrapper">-->
<!--              <image/>-->
<!--              <view class="item-content-wrapper">-->
<!--                <text class="item-title">【洋酒套餐】果味气泡酒</text>-->
<!--                <text class="item-desc">点击内容区域可以查看...</text>-->
<!--                <view class="item-time-wrapper">-->
<!--                  <image style="width: 28rpx; height: 28rpx;" src="/static/personal/time-circle-outlined.png"/>-->
<!--                  <text>2023/10/10</text>-->
<!--                </view>-->
<!--              </view>-->
<!--            </view>-->

          </view>
        </u-scroll-list>
      </view>

			<view class="timeline-box">
				<view class="timeline-tabs">
					<view class="timeline-title" :class="selectedKey === 'comment' ? 'active' : ''" @click="handleTabClick('comment')"><text style="z-index: 100;position: relative;">TA的动态</text></view>
					<view class="timeline-title" :class="selectedKey === 'play' ? 'active' : ''" @click="handleTabClick('play')"><text style="z-index: 100;position: relative;">TA玩过的</text></view>
				</view>
        <view class="empty" v-if="activityList.length === 0 && selectedKey === 'play'">
          <image class="empty-img" src="https://static.wddzq.com/static/kong.png"></image>
          <view class="empty-text">暂无数据～</view>
        </view>
				<view class="timeline-item" v-if="selectedKey === 'play'" v-for="item in activityList" :key="item.id">
					<view class="timeline-header">
						<text class="timeline-date">{{ item.dateDayShow }}</text>
						<tui-image-group :imageList="item.imageList || []" isGroup distance="-20" borderWidth="2rpx" borderColor="#fff" width="60rpx" height="60rpx"></tui-image-group>
						<text class="timeline-text">和{{ item.signUpCount }}人一起</text>
					</view>
					<view class="timeline-content">
						<image class="timeline-img" mode="aspectFill" :src="item.picFirst"></image>
<!--						<view class="timeline-info" @click="handleApply(item.id)">-->
						<view class="timeline-info">
							<view class="timeline-name">{{item.title}}</view>
							<view class="timeline-addr">
								<tui-icon name="gps" size="12" color="#000"></tui-icon>
                <text v-if="item.distanceShow">&nbsp;{{item.distanceShow}} &nbsp;&nbsp;|&nbsp;</text>
                <view>&nbsp;{{item.locationName}}</view>
							</view>
							<view class="timeline-time">
								<tui-icon name="time" size="12" color="#000"></tui-icon>
								<text>&nbsp;{{ item.dateShow }}</text>
							</view>
						</view>
					</view>
				</view>
			
				<view class="empty" v-if="dynamicsList.length === 0 && selectedKey === 'comment'">
					<image class="empty-img" src="https://static.wddzq.com/static/kong.png"></image>
					<view class="empty-text">暂无数据～</view>
				</view>
				<view class="community" v-if="selectedKey === 'comment'">
					<view class="community-item" v-for="(item, index) in dynamicsList" :key="item.id">
						<view class="community-header" @click="handleUserClick(item.userId)">
							<view style="position: relative;width: 74rpx;height: 80rpx;display: flex;justify-content: center;">
								<image class="community-img" style="margin-top: 6rpx;" mode="aspectFill" :src="item.userHeadPic" />
								<image v-if="item.vipOrNot" style="position: absolute;top:0;left: 0;width: 74rpx;height: 80rpx;" src="https://static.wddzq.com/static/V3/shequtouxiangkuang.png" />
							</view>
							<view class="community-info">
								<view class="community-name">
									<view :class="item.vipOrNot ? 'vip' : ''">{{item.userNickName}}</view>
				          <image v-if="item.vipOrNot" class="community-tag" src="https://static.wddzq.com/static/V3/aiwanxiaofendui.png" />
				        </view>
								<view class="community-time">{{item.createDate}}</view>
							</view>
						</view>
						<!-- <view class="community-title">浙江杭州亚运会距离开始倒计时：108天</view> -->
						<view class="community-content" @click="handleDetail(item.id)">{{item.content}}</view>
						<view class="community-img-box">
							<image mode="aspectFill" v-for="(it, index) in (item.picListV2?.split('|') || [])" :key="index" :src="it" :class="[0,3,6].includes(index) ? '' : 'ml-8'" :style="{width: imageWidth + 'rpx', height: imageWidth + 'rpx'}" @click="handleImagePreview(item.picListV2, index)" />
						</view>
						<view class="tag-list">
							<view class="tag-item" v-for="(it, index) in (item.tagVoList || [])" :key="index">#{{it.tagName}}</view>
						</view>
						<view class="commit-cell">
							<view class="commit-data">{{item.lookCount}}人浏览</view>
							<view class="commit-opts">
								<view class="commit-opts-item" @click="fetchCommitUserDiDi(item.userId)">
				          <image src="https://static.wddzq.com/static/V3/DD-xuanzhong.png"></image>&nbsp;
				          <text>DD</text>
								</view>
								<view class="commit-opts-item" @click="fetchCommitDynamicGood(item.id, index)">
				          <image v-if="item.goodOrNot" src="https://static.wddzq.com/static/V3/dianzan-xuanzhong.png"></image>&nbsp;
				          <image v-else src="https://static.wddzq.com/static/V3/dianzan-weixuanzhong.png"></image>&nbsp;
									<text>{{item.goodCount}}</text>
								</view>
								<view class="commit-opts-item">
				          <image src="https://static.wddzq.com/static/V3/pinglun.png"></image>&nbsp;
				          <text>{{item.commentCount}}</text>
								</view>
								<view v-if="item.myself" class="commit-opts-item" @click="handleDelete(item.id, index)">
				          <image src="https://static.wddzq.com/static/V3/delete-outlined.png"></image>
				        </view>
							</view>
						</view>
						<input :focus="focusDynamicId === item.id ? focus : false" type="text" confirm-type="评论" :auto-blur="false" :data-id="item.id" :confirm-hold="true" :value="focusDynamicId === item.id ? inputText : ''" @input="handleInput" @blur="handleBlur" @confirm="handleConfirm(item.id)" :placeholder="replyComment ?  '@' + replyComment.commentUserNickName : '点击评价'" style="font-size: 26rpx;color: #999999;border-radius: 18rpx;height: 80rpx;padding: 0 24rpx;background-color: #eee;" placeholder-style="font-size: 26rpx;color: #999999;font-weight: 400;" />
						<view class="comment-list" v-if="item.commentVoList?.length > 0">
							<view class="comment-item" v-for="it in item.commentVoList">
								<text class="comment-item-name" @click="handleCommentClick(it, item.id)">{{it.commentUserNickName}}{{it.replyUserNickName ? ` 回复 ${it.replyUserNickName}` : ''}}: </text>
								<text class="comment-item-text" @click="handleCommentClick(it, item.id)">{{it.commentContent}}</text>
				        <image v-if="it.myself" src="https://static.wddzq.com/static/V3/delete-outlined.png" style="width: 36rpx;height: 36rpx;" @click="handleDeleteCommit(it.id, item.id)" />
				      </view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="active-bottom">
			<view class="share-box" v-if="detail.userAttentionOrNot" @click="fetchCommitUserAttentionDetail(detail.userId)">
				<image src="https://static.wddzq.com/static/V3/gerenzhongxin-guanzhu.png"></image>
				<view class="share-text">已关注</view>
			</view>
      <view class="share-box" v-else @click="fetchCommitUserAttentionDetail(detail.userId)">
        <image src="https://static.wddzq.com/static/V3/gerenzhongxin-weiguanzhu.png"></image>
        <view class="share-text">关注</view>
      </view>
		  <u-button class="share-btn" customStyle="display: flex; height: 88rpx; border-radius: 72rpx;background-color: #030303;" color="#fff" @click="fetchCommitUserDiDi(detail.userId)">
		    <image class="share-btn-img" src="https://static.wddzq.com/static/V3/gerenzhongxin-anniudidi.png" />
		    <view class="share-btn-bm">滴滴</view>
		  </u-button>
		</view>
	</view>
</template>

<script>
import {
  getUserAssociationActivityPage,
  getUserDynamicsPage,
  getUserInfoByUserId,
  commitUserDiDi,
  commitUserAttention,
  commitDynamicComment,
  getDynamicsDetail,
  commitDynamicGood,
  deleteDynamicComment,
  deleteDynamic,
  getUserActivityIngList
} from '../../config/api.js';
	import { to, getUserInfoDetail,pxToRpx, getSystemInfo } from '../../config/utils.js';

	export default {
		data() {
			return {
        params: {},
			  currentIndex: 0,
				detail: {},
        activityList: [],
				swiperList: [
				],
				imageList: [
				],
				current: 0,
				
				imageWidth: 80,
				dynamicsList: [],
				selectedKey: 'comment',
				
				filterData: {
					pages: 1,
					size: 20,
				},

        userActivityIngList: [],
			}
		},
    onLoad(params) {
      console.log(params);
      this.params = params;
    },
		onShow() {
			// 如果是发布动态回来的
			if(uni.getStorageSync('__commit_success')) {
				this.resetDynamics();
				uni.removeStorageSync('__commit_success');
			}
		},
		onReady() {
			let system = getSystemInfo();
			if(system) {
				let screenWidth = pxToRpx(system.screenWidth || 320);
				this.imageWidth = Math.floor((screenWidth - 100 - 16)/3);
			}
			
			this.fetchUserInfo();
			this.fetchMyJoined();
			this.resetDynamics();
      this.fetchUserActivityIngList();
		},
		methods: {

      navigateToPack(productId){
        uni.navigateTo({
          url: `/pages/pack/pack?productId=${productId}`
        })
      },

			handleImgClick(index) {
				this.current = index;
			},
			
			// 关注/取消关注
			async fetchCommitUserAttentionDetail(userId) {
				let params = {
					userId: userId
				};
				
				const [err, data] = await to(commitUserAttention(params, { params: `userId=${userId}`}));
				
				if(err) {
					return uni.showToast({
						title: err?.msg || '操作失败',
						icon: 'none'
					})
				};
				let _detail = {...this.detail};
				_detail.userAttentionOrNot = !_detail.userAttentionOrNot;
				this.detail = _detail;
			},
			// 发送DIDI
			async fetchCommitUserDiDi(userId) {
				let params = {
					userId: userId
				};
				
				const [err, data] = await to(commitUserDiDi(params));
				
				if(err) {
					return uni.showToast({
						title: err?.msg || '操作失败',
						icon: 'none'
					})
				};
				uni.showToast({
					title: data?.data || '发送成功',
					icon: 'none'
				})
				// _dynamicsList[index].goodOrNot = !_dynamicsList[index].goodOrNot;
			},
      async fetchUserActivityIngList(){
        const [err, response] = await to(getUserActivityIngList({userId: this.params.userId}));
        if(err || !response.success){
          return uni.showToast({
            title: err?.msg || '获取信息失败'
          })
        } else {
          this.userActivityIngList = response.data;
        }
      },
			// 获取个人主页信息
			async fetchUserInfo() {
				const [err, data] = await to(getUserInfoByUserId({ userId: this.params.userId }));

				if(err) {
					return uni.showToast({
						title: err?.msg || '获取个人认证信息失败'
					})
				}
				if(data.success) {
					this.detail = data?.data || {};
				} else {
					return uni.showToast({
						title: data?.msg || '获取个人认证信息失败'
					})
				}
			},
			handleApply(activityId) {
				uni.navigateTo({
					url: `/pages/detail/detail?activityId=${activityId}`
				})
			},
			handleAttendClick() {
				uni.navigateTo({
					url: '/pages/my-attens/my-attens?userId=' + this.detail.userId
				})
			},
			handleFansClick() {
				uni.navigateTo({
					url: '/pages/my-fans/my-fans?userId=' + this.detail.userId
				})
			},
			// 获取我玩过的
			async fetchMyJoined() {
				let userInfo = getUserInfoDetail();
				if(!userInfo) return;
				const [err, data] = await to(getUserAssociationActivityPage({userId: this.params.userId}));

				if(err) return;
				if(data.success) {
          this.activityList = (data?.data?.records || []).map(item => {
            item.imageList = item.userSignUpVoList?.map(item => item.headPic) || [];
            return item;
          })
				}
			},
			handleDetail(id) {
				uni.navigateTo({
					url: '/pages/commit-detail/commit-detail?id=' + id
				})
			},
			handleCommentClick(replyComment, dynamicId) {
				if(replyComment) {
					this.focus = true;
					
					setTimeout(() => {
						this.replyComment = replyComment;
						this.focusDynamicId = dynamicId;
					}, 300)
				}
			},
			
			handleImagePreview(urls, index) {
				uni.previewImage({
					current: index,
					urls: urls.split('|')
				})
			},
			
			// 删除动态
			async handleDelete(dynamicId, index) {
				let isDel = await this.showModal();
				if(!isDel) return;
				
				const [err, data] = await to(deleteDynamic({ dynamicId }))
				if(err) {
					return uni.showToast({
						title: err?.msg || '删除动态成功',
						icon: 'none'
					})
				}
				let _dynamicsList = [...this.dynamicsList];
				_dynamicsList.splice(index, 1);
				this.dynamicsList = _dynamicsList;
			},
			async handleDeleteCommit(commentId, dynamicId) {
				let isDel = await this.showModal();
				if(!isDel) return;
				
				const [err, data] = await to(deleteDynamicComment({ commentId }))
				if(err) {
					return uni.showToast({
						title: err?.msg || '删除评论成功',
						icon: 'none'
					})
				}
				this.fetDynamicsDetail(dynamicId);
			},
			showModal() {
				return new Promise(resolve => {
					uni.showModal({
						title: '确认删除？',
						success: function (res) {
							if (res.confirm) {
								resolve(true);
							} else if (res.cancel) {
								resolve(false);
							}
						}
					});
				})
			},
			// 评论
			async handleConfirm(dynamicId, replyComment) {
				if(!this.inputText) {
					return uni.showToast({
						title: '请输入评论内容',
						icon: 'none'
					})
				}
				
				let params = {
					dynamicId,
					replyCommentId: this.replyComment?.id,
					commentContent: this.inputText
				};
				const [err, data] = await to(commitDynamicComment(params));
				
				if(err) {
					return uni.showToast({
						title: err?.msg || '评论失败',
						icon: 'none'
					})
				}
				
				this.inputText = '';
				this.focusDynamicId = '';
				this.replyComment = '';
				this.fetDynamicsDetail(dynamicId);
				
				uni.showToast({
					title: '评论成功',
					icon: 'none'
				})
			},
			handleInput(e) {
				this.focusDynamicId = e.currentTarget.dataset.id;
				this.inputText = e.detail.value;
			},
			handleBlur() {
				this.focusDynamicId = '';
				this.inputText = '';
				this.replyComment = '';
				this.focus = false;
			},
			// 获取评论详情
			async fetDynamicsDetail(id) {
				let params = {
					dynamicId: id,
				};
				const [err, data] = await to(getDynamicsDetail(params));
				
				if(err) return;
				if(data?.data?.commentVoList) {
					let _dynamicsList = [...this.dynamicsList];
					_dynamicsList.forEach(item => {
						if(item.id === id) {
							item.commentVoList = data?.data?.commentVoList;
						}
					})
				}
			},
			// 重新请求接口
			resetDynamics() {
				let params = {
					...this.filterData,
					pages: 1,
				};
				this.loading = false;
				this.hasMore = true;
				this.fetchDynamicsPage(params, true);
			},
			async fetchDynamicsPage(params, isClear) {
				this.loading = true;
				params.current = params.pages;
        params.userId = this.params.userId
				const [err, dynamicsList] = await to(getUserDynamicsPage(params));
				this.loading = false;
				uni.stopPullDownRefresh();
				if(err) return;
				let records = dynamicsList?.data?.records || [];
				
				if(records.length < this.filterData.size) {
					this.hasMore = false;
				}
				this.dynamicsList = isClear ? records : this.dynamicsList.concat(records);
			},
			//点赞
			async fetchCommitDynamicGood(id, index) {
				let params = {
					dynamicId: id
				};
				
				const [err, data] = await to(commitDynamicGood(params));
				
				if(err) {
					return uni.showToast({
						title: err?.msg || 'DIDI发送失败',
						icon: 'none'
					})
				};
				
				const _dynamicsList = [...this.dynamicsList];
				if(_dynamicsList[index].goodOrNot) {
					_dynamicsList[index].goodCount = (_dynamicsList[index].goodCount || 0) - 1;
				} else {
					_dynamicsList[index].goodCount = (_dynamicsList[index].goodCount || 0) + 1;
				}
				_dynamicsList[index].goodOrNot = !_dynamicsList[index].goodOrNot;
				this._dynamicsList = _dynamicsList;
				
			},
			// 发送DIDI
			async fetchCommitUserDiDi(userId) {
				let params = {
					userId: userId
				};
				
				const [err, data] = await to(commitUserDiDi(params));
				
				if(err) {
					return uni.showToast({
						title: err?.msg || '操作失败'
					})
				};
				
				uni.showToast({
					title: data?.data || '发送成功',
					icon: 'none'
				})
			},
			handleUserClick(userId) {
				uni.navigateTo({
					url: '/pages/personal/personal?userId=' + userId
				})
			},
			handleTabClick(key) {
				this.selectedKey = key;
			},
		}
	}
</script>

<style>

.active-list-wrapper{
  margin-top: 24rpx;
  width: 702rpx;
  height: 276rpx;
  position: relative;
  display: flex;
  flex-direction: column;
}
.list-wrapper{
  display: flex;
  padding-left: 16rpx;
}
.item-wrapper{
  width: 474rpx;
  border-radius: 18rpx;
  background: #fff;
  display: flex;
  margin-right: 16rpx;
  padding: 16rpx;
}
.item-wrapper image{
  width: 140rpx;
  height: 140rpx;
  border-radius: 16rpx;
  margin-right: 16rpx;
}
.item-content-wrapper{
  height: 140rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.item-title{
  font-size: 26rpx;
  font-weight: bold;
  color: #333333;
}
.item-desc{
  font-size: 24rpx;
  font-weight: 400;
  color: #999999;
}
.item-time-wrapper{
  display: flex;
  align-items: center;
}
.item-time-wrapper text{
  font-size: 24rpx;
  font-weight: 400;
  color: #666666;
}



.content {
	background-color: #fff;
	border-top-left-radius: 20rpx;
	border-top-right-radius: 20rpx;
	margin-top: -20rpx;
	position: relative;
	z-index: 10000;
	padding: 48rpx 24rpx;
}

.image-thunmbs {
	position: absolute;
	top: -100rpx;
	left: 0;
}
.image-thunmbs image {
	/*width: 92rpx;*/
	/*height: 92rpx;*/
  width: 60rpx;
  height: 60rpx;
	border-radius: 18rpx;
	margin-left: 24rpx;
}
.image-thunmbs image.active {
	border: 4rpx solid #fff;
}

.header {
	display: flex;
	align-items: center;
	/* margin-bottom: 18rpx; */
}
.header text {
	font-size: 36rpx;
	color: #333;
	margin-right: 14rpx;
	font-weight: bold;
}

.header text.vip {
	color: #FF6F0A;
}
.header .community-tag {
	width: 143rpx;
	height: 44rpx;
	margin-left: 12rpx;
}

.header image {
	width: 27rpx;
	height: 27rpx;
}

.info {
	display: flex;
	margin-bottom: 30rpx;
}
.info image {
	width: 32rpx;
	height: 32rpx;
	margin-right: 8rpx;
}
.info text {
	font-size: 24rpx;
	color: #333;
}

.desc {
	font-size: 28rpx;
	color: #333;
	padding: 30rpx 26rpx;
	background-color: #f2f2f2;
	border-radius: 18rpx;
}

.timeline-box {
	padding: 0 24rpx;
	margin-top: 44rpx;
	box-shadow: 0rpx 0rpx 32rpx 0rpx rgba(0,0,0,.05);
}

.timeline-tabs {
	display: flex;
	align-items: center;
}
.timeline-title {
	font-size: 28rpx;
	color: #000;
	margin-top: 44rpx;
	margin-bottom: 38rpx;
	font-weight: bold;
	position: relative;
	margin-right: 34rpx;
	z-index: 2;
}
.timeline-title.active::before {
	position: absolute;
	content: ' ';
	bottom: 0;
	left: 0;
	width: 100%;
	height: 12rpx;
	background: #FFB803;
	z-index: 99;
}
.timeline-header {
	display: flex;
	align-items: center;
	margin-bottom: 30rpx;
}
.timeline-date {
	font-size: 28rpx;
	color: #333;
	margin-right: 24rpx;
}
.timeline-text {
	font-size: 24rpx;
	color: #aaa;
	margin-left: 12rpx;
}

.timeline-item {
	padding-bottom: 25rpx;
}

.timeline-item:last-child .timeline-content {
	border-left: 0rpx solid #ddd;
}

.timeline-content {
	/* display: flex; */
	border-left: 2rpx solid #ddd;
	padding-left: 24rpx;
	padding-top: 14rpx;
	padding-bottom: 30rpx;
	margin-left: 10rpx;
	position: relative;
}
.timeline-img {
	width: 200rpx;
	height: 200rpx;
	border-radius: 20rpx;
	position: absolute;
	top: 0;
	left: 20rpx;
}

.timeline-info {
	margin-left: 218rpx;
}
.timeline-name {
	font-size: 32rpx;
	color: #000;
	margin-bottom: 22rpx;
}

.timeline-addr, .timeline-time {
	font-size: 24rpx;
	color: #666;
	display: flex;
	align-items: center;
	margin-bottom: 22rpx;
}

.timeline-addr view {
	flex: 1;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}


	.active-bottom {
		display: flex;
		padding-left: 64rpx;
		padding-right: 48rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		background-color: #fff;
		padding: 30rpx 48rpx;
		box-sizing: border-box;
		box-shadow: 0rpx -4rpx 4rpx 0rpx rgba(0,0,0,0.02);
		z-index: 1000000;
	}
	.share-box {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		margin-right: 66rpx;
		position: relative;
		width: 160rpx;
	}
	.share-box image {
		width: 44rpx;
		height: 40rpx;
		margin-bottom: 4rpx;
		margin-bottom: 6rpx;
	}
	.share-box .share-text {
		height: 32rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #333333;
		line-height: 32rpx;
	}
	.share-box-btn {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
	}
	.share-btn {
		flex: 1;
	}
	.share-btn-img {
		width: 36rpx;
		height: 36rpx;
	}
	.share-btn-bm {
    margin-left: 16rpx;
		font-size: 28rpx;
		color: #fff;
	}
	.share-btn-yh {
		font-size: 20rpx;
		color: #FFB803;
	}
	
	
/* 动态 */
.community {
	/* padding: 0 24rpx; */
}
.community-item {
	background: #FFFFFF;
	border-radius: 18rpx;
	padding: 0 0 32rpx 0;
	border-bottom: 1rpx solid #f2f2f2;
}
.community-item .community-header {
	display: flex;
	align-items: center;
}

.community-header .community-img {
	width: 66rpx;
	height: 66rpx;
	border-radius: 40rpx;
}
.community-header .community-info {
	margin-left: 10rpx;
}

.community-info .community-name {
	display: flex;
	height: 42rpx;
	font-size: 30rpx;
	font-weight: 500;
	color: #333333;
	line-height: 42rpx;
}
.community-info .community-name view {
	margin-right: 8rpx;
}
.community-info .community-name view.vip {
	color: #FF6F0A;
}
.community-info .community-name .community-tag {
	width: 143rpx;
	height: 44rpx;
}

.community-info .community-time {
	height: 30rpx;
	font-size: 22rpx;
	font-weight: 400;
	color: #999999;
	line-height: 30rpx;
}

.community-title {
	height: 36rpx;
	font-size: 28rpx;
	font-weight: 500;
	color: #333333;
	line-height: 36rpx;
	margin-top: 16rpx;
	margin-bottom: 8rpx;

}
.community-content {
	font-size: 28rpx;
	font-weight: 400;
	color: #666666;
	line-height: 36rpx;
	margin-bottom: 16rpx;
	margin-top: 20rpx;
}
.community-img-box {
	display: flex;
	flex-wrap: wrap;
}
.community-img-box image {
	height: 210rpx;
	border-radius: 18rpx;
	margin-bottom: 8rpx;
}

.tag-list {
	margin: 24rpx 0;
	display: flex;
	flex-wrap: wrap;
}
.tag-item {
	height: 48rpx;
	background: #F7F7F7;
	border-radius: 24rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 16rpx;
	margin-bottom: 10rpx;
	
	font-size: 24rpx;
	font-weight: 400;
	color: #999999;
	padding: 0 16rpx;
}

.commit-cell {
	display: flex;
	align-items: center;
	margin-bottom: 25rpx;
}
.commit-cell .commit-data {
	height: 34rpx;
	font-size: 26rpx;
	font-weight: 400;
	color: #999999;
	line-height: 34rpx;
}
.commit-cell .commit-opts {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}
.commit-opts .commit-opts-item {
	display: flex;
	align-items: center;
	margin-left: 40rpx;
}
.commit-opts-item image {
	width: 32rpx;
	height: 32rpx;
}
.commit-opts-item text {
	height: 36rpx;
	font-size: 28rpx;
	font-weight: 400;
	color: #999999;
	line-height: 36rpx;
}

.comment-list {
	background-color: #f2f2f2;
	border-radius: 18rpx;
	padding: 20rpx;
	margin-top: 25rpx;
}
.comment-list .comment-item {
	display: flex;
	align-items: center;
	margin-bottom: 15rpx;
}
.comment-item .comment-item-name {
	font-size: 28rpx;
	color: #999;
}
.comment-item .comment-item-text {
	font-size: 28rpx;
	color: #333;
	flex: 1;
	padding: 0 12rpx;
}

.ml-8 {
	margin-left: 8rpx;
}


.info-data {
	display: flex;
	align-items: center;
	margin: 20rpx 0 26rpx 0;
}
.info-data-item {
	margin-right: 40rpx;
}
.info-data-item .info-data-number {
	height: 36rpx;
	font-size: 28rpx;
	font-weight: 500;
	color: #333333;
	line-height: 36rpx;
}
.info-data-item .info-data-text {
	height: 36rpx;
	font-size: 24rpx;
	font-weight: 400;
	color: #999999;
	line-height: 36rpx;
	padding-left: 8rpx;
}
</style>
